<template>
  <a-modal
    title="合同编辑"
    :width="800"
    :visible="visible"
    :confirmLoading="loading"
    @ok="() => { $emit('ok') }"
    @cancel="() => { $emit('cancel') }">
    <a-spin :spinning="loading">
      <a-form
        :form="form"
        v-bind="formLayout">
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="合同名称">
              <a-input
                placeholder="请输入合同名称"
                v-decorator="['contractName' ,{ rules: [{ required: true, message: '请输入合同名称' }] }]" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="合同类型">
              <!--              <a-input v-decorator="['projectType']" />-->
              <a-select
                placeholder="请选择合同类型"
                @change="typeChange"
                v-decorator="['contractType',{ rules: [{ required: true, message: '请输入合同类型' }] }]">
                <a-select-option :value="1">
                  项目合同
                </a-select-option>
                <a-select-option :value="2">
                  采购合同
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="甲方">
              <!-- <a-input
                placeholder="请输入甲方"
                v-decorator="['firstParty',{ rules: [{ required: true, message: '请输入甲方' }] }]" /> -->
              <a-select
                show-search
                :filter-option="filterOption"
                key="customerId"
                v-decorator="['firstParty',{ rules: [{ required: true, message: '请输入甲方' }] }]"
                placeholder="请选择甲方">
                <a-select-option
                  v-for="i in customers"
                  :key="i.customerId"
                  :value="i.companyName">
                  {{ i.companyName }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="甲方负责人">
              <a-input
                placeholder="请输入甲方负责人"
                v-decorator="['firstPartyPerson',{ rules: [{ required: true, message: '请输入甲方方负责人' }] }]" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="甲方联系方式">
              <a-input
                placeholder="请输入甲方联系方式"
                v-decorator="['firstPartyContactWay',{ rules: [{ required: true, message: '请输入甲方联系方式' }] }]" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="乙方">
              <!-- <a-input
                placeholder="请输入乙方"
                v-decorator="['secondParty',{ rules: [{ required: true, message: '请输入乙方' }] }]" /> -->
              <a-select
                show-search
                :filter-option="filterOption"
                key="supplierId"
                v-decorator="['secondParty',{ rules: [{ required: true, message: '请输入乙方' }] }]"
                placeholder="请选择乙方">
                <a-select-option
                  v-for="i in suppliers"
                  :key="i.supplierId"
                  :value="i.companyName">
                  {{ i.companyName }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="乙方负责人">
              <a-input
                placeholder="请输入乙方负责人"
                v-decorator="['secondPartyPerson',{ rules: [{ required: true, message: '请输入乙方负责人' }] }]" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="乙方联系方式">
              <a-input
                placeholder="请输入乙方联系方式"
                v-decorator="['secondPartyContactWay',{ rules: [{ required: true, message: '请输入乙方联系方式' }] }]" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="签订日期">
              <a-date-picker
                placeholder="请选择签订日期"
                valueFormat="YYYY-MM-DD hh:mm:ss"
                v-decorator="['signDate',{ rules: [{ required: true, message: '请选择签订日期' }] }]" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="交付日期">
              <a-date-picker
                placeholder="请选择交付日期"
                valueFormat="YYYY-MM-DD hh:mm:ss"
                v-decorator="['deliveryDate',{ rules: [{ required: true, message: '请选择交付日期' }] }]" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="合同金额">
              <a-input
                placeholder="请输入合同金额"
                v-decorator="['money']" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="违约责任">
              <a-textarea
                placeholder="请输入违约责任"
                v-decorator="['breachLiability']" />
            </a-form-item>
          </a-col>
          <a-col
            :span="12"
            v-if="!isEdit">
            <a-form-item label="附件上传">
              <a-upload-dragger
                name="file"
                :multiple="true"
                action="#"
                :file-list="fileList"
                :custom-request="uploadFile"
                @change="handleChange">
                <p class="ant-upload-drag-icon">
                  <a-icon type="inbox" />
                </p>
                <p class="ant-upload-text">
                  点击或拖拽文件上传
                </p>
              </a-upload-dragger>
            </a-form-item>
          </a-col>
          <a-form-item
            label="附件ID"
            v-if="!isEdit"
            v-show="false">
            <a-input v-decorator="['fileIds']" />
          </a-form-item>
        </a-row>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import pick from 'lodash.pick'
import { saveFile } from '@/api/manage'
// 表单字段
const fields = ['id', 'createDate', 'projectName', 'projectType', 'completeDate', 'customer', 'staff']

export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    loading: {
      type: Boolean,
      default: () => false
    },
    model: {
      type: Object,
      default: () => null
    },
    isEdit: {
      type: Boolean,
      required: false
    },
    customers: {
      type: Array,
      default: () => []
    },
    suppliers: {
      type: Array,
      default: () => []
    }
  },
  data () {
    this.formLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 13 }
      }
    }
    return {
      form: this.$form.createForm(this),
      fileList: []
    }
  },
  methods: {
    typeChange (type) {
      console.log(type)
      // 项目合同 设置乙方为奥展
      if (type === 1) {
        this.form.setFieldsValue({ secondParty: '杭州奥展科技有限公司', secondPartyPerson: '', secondPartyContactWay: '', firstParty: '', firstPartyPerson: '', firstPartyContactWay: '' })
      } else {
        this.form.setFieldsValue({ secondParty: '', secondPartyPerson: '', secondPartyContactWay: '', firstParty: '杭州奥展科技有限公司', firstPartyPerson: '', firstPartyContactWay: '' })
      }
    },
    handleChange ({ fileList }) {
      this.fileList = fileList
    },
    resetFileList () {
      this.fileList = []
    },
    filterOption (input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    },
    uploadFile (e) {
      const param = new FormData()
      param.append('file', e.file)
      saveFile(param)
        .then(res => {
          e.onSuccess(
            {
              uid: e.file.uid,
              name: res.data.fileName,
              status: 'done',
              url: res.data.fileUrl,
              fileId: res.data.fileId
            },
            e
          )
          // 提交时只去状态是done的文件
          if (this.fileList) {
            const fileList = this.fileList.filter(item => item.status === 'done')
            if (fileList) {
              const fileIds = []
              for (const item of fileList) {
                fileIds.push(item.response.fileId)
              }
              this.form.setFieldsValue({ fileIds: fileIds.join(',') })
            }
          }
        })
        .catch(() => e.onError({ status: 'error', url: '' }, e))
    }
  },
  created () {
    // 防止表单未注册
    fields.forEach(v => this.form.getFieldDecorator(v))

    // 当 model 发生改变时，为表单设置值
    this.$watch('model', () => {
      this.model && this.form.setFieldsValue(pick(this.model, fields))
    })
  }
}
</script>
